import { useEffect } from 'react'
import { Select } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels } from '@/store/actions/article'

// 函数参数解构和函数参数默认值
// 注意这里的解构，因为在React执行上下文中，组件渲染一定会接收一个 props 对象，所以这里放心的从对象中解构参数变量
export const Channel = ({ value, onChange, width = 264 }) => {
  // hooks 相关
  const dispatch = useDispatch()

  // 组件状态-频道数据
  const channels = useSelector(state => state.article.channels)

  // 组件渲染完毕后发起请求
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])

  return (
    <Select placeholder="请选择文章频道" value={value} onChange={onChange} style={{ width }}>
      {channels.map(item => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  )
}
